<template>
            <h2>个人信息修改</h2>
            <el-form :model="editUser" label-width="auto" style="max-width: 600px">
              <el-form-item label="头像">
                <el-upload class="avatar-uploader" action="/api/image" name="imageFile" :headers="headers"
                :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <div class="avatar-frame">
                    <img v-if="editUser.avatar" :src="editUser.avatar" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus/>
                    </el-icon>
                </div>
            </el-upload>
              </el-form-item>
        
              <!-- 账号（不可修改） -->
              <el-form-item label="账号">
                <el-input v-model="editUser.userName" disabled></el-input>
              </el-form-item>
            
              <!-- 绑定邮箱 -->
              <el-form-item label="绑定邮箱">
                <el-input v-model="editUser.email" placeholder="请输入新的邮箱"></el-input>
              </el-form-item>
        
              <!-- 手机号 -->
              <el-form-item label="手机号">
                <el-input v-model="editUser.phone" placeholder="请输入新的手机号"></el-input>
              </el-form-item>
        
              <!-- 个人简介 -->
              <el-form-item label="个人简介">
                <el-input v-model="editUser.bio" type="textarea" placeholder="填写你的个人简介"></el-input>
              </el-form-item>
        
       
        
              <!-- 生日设置 -->
              <el-form-item label="生日">
                <el-date-picker v-model="editUser.birthday" type="date" placeholder="选择生日"></el-date-picker>
              </el-form-item>
        
         
        
              <!-- 性别选择 -->
              <el-form-item label="性别">
                <el-radio-group v-model="editUser.gender">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                  <el-radio label="保密">保密</el-radio>
                </el-radio-group>
              </el-form-item>
        
              <!-- 保存按钮 -->
              <el-form-item>
                <el-button type="primary" @click="saveChanges">保存修改</el-button>
              </el-form-item>
            </el-form>
        
  </template>
  
  <script>
  import NavBar from "@/components/NavBar.vue";
  import Info from "@/components/Person/Info.vue";
  import { ref, reactive, computed ,onMounted} from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { findchaiByName ,deleteOrderById} from '@/api/user'
  import { InfoFilled, Edit, Delete } from '@element-plus/icons-vue' 
  import{updateUser} from '@/api/user'
  import { ElMessage, ElMessageBox } from 'element-plus';
  export default {
    name: "EditView",
    components: {  },
    props: {
      user: {
      type: Object,  
      default: () => ({})  // 如果没有传递，默认为空对象
    }
    },
    setup(props) {
  const router = useRouter()
  const route = useRoute()
  const deletedata= reactive({})
  const total = ref(0)
      // 编辑信息相关
     // 创建 `editUser`，用于表单编辑
     const editUser = reactive({
      userId:props.user.userId|| '',
      userName: props.user.userName || '',
      email: props.user.person?.email || '',
      phone: props.user.person?.phone || '',
      bio: props.user.bio || '',
      avatar: props.user.avatar || '',
      birthday: props.user.person?.birthday || '',
      signature: props.user.person?.signature || '',
      gender: props.user.person?.gender || '',
      passwordOld: '',
      passwordNew: ''
    })

  // 保存修改的方法
  const saveChanges = () => {
    updateUser(editUser).then(
      (res)=>{
        if(res.state===0){
        ElMessage.success(res.message || '修改成功！');

      }}
    )

  };
  const handleAvatarSuccess = (res) => {
    if (res.state > 0) {
        ElMessage.error(res.message || "系统出错");
        return new Promise(() => { /*b不能删的注释*/});
    } else if (res.state === -1) {
        ElMessageBox.alert('登录已经过期，请重新登录', '登录过期', {
            confirmButtonText: '重新登录',
            callback: () => {
                window.location.href = "/login";
            },
        })
        return new Promise(() => { /*b不能删的注释*/});
    } else {
      editUser.avatar = res.data;
    }
}
const beforeAvatarUpload = (rawFile) => {
    if (!(rawFile.type == 'image/jpeg' || rawFile.type == 'image/jpg' || rawFile.type == 'image/png')) {
        ElMessage.error('上传图片必须是jpeg、 jpg、 png格式!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 50) {
        ElMessage.error('图片的大小不能超过50M!')
        return false
    }
    return true
}
      return {
        // showEditForm,
        editUser,handleAvatarSuccess,beforeAvatarUpload
        // saveChanges,
        // cancelEdit
      }
    }
  }
  </script>
  
  <style scoped>
 
 

/* Form styling */
.el-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Label styling */
.el-form-item {
  margin-bottom: 15px;
}

/* Input field styling */
.el-input,
.el-date-picker {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #ddd;
  transition: all 0.3s ease;
}

/* Input focus styling */
.el-input:focus,
.el-date-picker:focus {
  border-color: #409EFF;
}

/* Placeholder styling */
.el-input::placeholder {
  color: #999;
}

/* Button styling */
.el-button {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border-radius: 4px;
  /* background-color: #409EFF; */
  color: white;
  border: none;
  transition: background-color 0.3s ease;
}

/* Button hover effect */
.el-button:hover {
  background-color: #66b1ff;
}

/* Radio group styling */
.el-radio-group {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}

.el-radio {
  font-size: 14px;
}

.el-radio + .el-radio {
  margin-left: 15px;
}

/* Specific form item spacing */
.el-form-item label {
  font-size: 14px;
  color: #555;
  font-weight: 500;
}

.avatar-uploader {
  display: flex;
  align-items: center;
}

.avatar-uploader .avatar {
  width: 50px;
  height: 50px;
  margin-top: 10px;
  border-radius: 50%;
}
  </style>
  